<template>
  <div>
    <!-- 查看过去30天排行榜 -->

    查看排行榜:
    <el-date-picker
      v-model="value1"
      :visible.sync="disHotData"
      placeholder="选择日期"
      type="date"
      value-format="yyyy-MM-dd"
      @change="getHotData(value1)">
    </el-date-picker>

    <template>
      状态:
      <el-select v-model="SelectDemandDTO.state" clearable placeholder="请选择状态" @change="getValue">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-button circle icon="el-icon-search" @click="getData(SelectDemandDTO.value)"></el-button>
    </template>
    <!--  新增需求单 -->
    <el-button round type="primary" @click="goAddNeed">添加需求单</el-button>
    <el-button round type="primary" @click="generatedExcel">导出excel</el-button>
    <el-button class="el-icon-refresh" @click="refresh()"></el-button>

    <!-- 查询条件 -->

    <el-dialog :visible.sync="disHotData" title="当日需求排行榜">
      <el-table :data="hotData">
        <el-table-column label="排名" type="index" width="150"></el-table-column>
        <el-table-column label="商品编码" property="goodsNumber" width="300"></el-table-column>
        <el-table-column label="当日需求量" property="quantity" width="300"></el-table-column>
      </el-table>
    </el-dialog>

    <el-row>
      <!-- 表格数据 -->
      <template>
        <el-table
          :data="SelectDemandVo"
          style="width: 100%">
          <el-table-column
            label="编号"
            prop="id">
          </el-table-column>
          <el-table-column
            label="创建人"
            prop="createUser">
          </el-table-column>
          <el-table-column
            label="创建时间"
            prop="createTime">
          </el-table-column>
          <el-table-column
            label="最后修改人"
            prop="updateUser">
          </el-table-column>
          <el-table-column
            label="修改时间"
            prop="updateTime">
          </el-table-column>
          <el-table-column
            label="状态"
            prop="state">
            <template slot-scope="scope">
              <span v-if="scope.row.state===1" style="color: #909399">审核通过</span>
              <span v-else-if="scope.row.state===-1" style="color: red">审核未通过</span>
              <span v-else-if="scope.row.state===0" style="color: #E6A23C">待审核</span>
              <span v-else-if="scope.row.state===2" style="color:#67C23A;">待分配</span>
              <span v-else-if="scope.row.state===3" style="color:#67C23A;">已分配</span>
              <span v-else-if="scope.row.state===4" style="color:#67C23A;">采购中</span>
              <span v-else-if="scope.row.state===5" style="color:#67C23A;">采购完成</span>

            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            width="180">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="details(scope)">详情</el-button>
              <el-button v-if="scope.row.state ===0 && perms ===200" :size="'mini'" type="primary"
                         @click="auditBuyDemandSuc(scope)">审核通过
              </el-button>
              <el-button v-if="scope.row.state ===0 && perms ===200" :size="'mini'" type="error"
                         @click="auditBuyDemandFail(scope)">审核驳回
              </el-button>
              <el-button v-else-if="scope.row.state ===1" :size="'mini'" type="primary"
                         @click="demandToPurchase(scope)">生成采购单
              </el-button>
              <el-button v-else-if="scope.row.state === -1 && perms ===200" :size="'mini'" type="primary"
                         @click="auditBuyDemandSuc(scope)">再审通过
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 审核确认框 -->
        <el-drawer
          :visible.sync="table"
          direction="rtl"
          size="50%"
          title="需求单详情">
          <el-table :data="DemandDetailsList">
            <el-table-column label="商品名" property="goodsName" width="90"></el-table-column>
            <el-table-column label="品类" property="categoryType" width="90"></el-table-column>
            <el-table-column label="物料" property="meteriType" width="90"></el-table-column>
            <el-table-column label="产品线" property="producter" width="90"></el-table-column>
            <el-table-column label="成色" property="purity" width="90"></el-table-column>
            <el-table-column label="数量" property="quantity" width="90"></el-table-column>
            <el-table-column label="重量(克)" property="weight" width="90"></el-table-column>
            <el-table-column label="单价(元)" property="unitPrice" width="90"></el-table-column>
          </el-table>
        </el-drawer>
      </template>

      <!-- 分页插件 -->
      <div class="block" style="margin: auto">
        <el-pagination
          :current-page=this.SelectDemandDTO.current
          :page-size=this.SelectDemandDTO.pageSize
          :page-sizes="[5, 10, 20, 40]"
          :total=this.total
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange">
        </el-pagination>
      </div>
    </el-row>
  </div>

</template>
<script>

export default {
  SelectDemandDTO() {
    return {}
  },
  data() {
    return {
      hotData: [],
      value1: '',
      permsList: [],
      dialogVisible: false,
      disHotData: false,
      perms: 0,
      table: false,
      SelectDemandVo: {},
      DemandDetailsList: [],
      SelectDemand: {},
      DemandDetails: {},
      SelectDemandDTO: {
        "current": 1,
        "pageSize": 5,
        "value": this.value,
        "state": null
      },
      options: [
        {
          value: '-1',
          label: '未通过'
        }
        ,
        {
          value: '0',
          label: '待审核'
        }
        , {
          value: '1',
          label: '审核通过'
        }, {
          value: '2',
          label: '待分配'
        }, {
          value: '3',
          label: '已分配'
        }, {
          value: '4',
          label: '采购中'
        },
        {
          'value': '5',
          label: '已完成'
        }],
      value: '',
      total: '',
      currentDate: ''
    }
  },
  mounted: function () {
    this.getData()
    this.$axios.get("/user/findUserByAccount/" + window.localStorage.getItem("account")).then(res => {
      console.log("=================", res.data.data.roleList[0].permsList)
      this.permsList = res.data.data.roleList[0].permsList
      for (let i = 0; i < this.permsList.length; i++) {
        if (this.permsList[i].name === 'buy:agreeNeed') {
          this.perms = 200
          return
        }
      }

    });

  },

  methods: {
    refresh() {
      this.getData()
    },

    //分页
    handleSizeChange(val) {
      this.SelectDemandDTO.pageSize = val
      this.getData()
    },
    handleCurrentChange(val) {//修改页码时触发
      //给当前页属性赋值
      this.SelectDemandDTO.current = val
      //发请求获取数据  调用方法
      this.getData()
    },
    getData: function () {
      this.$axios.post("/purchase/buyDemand/findDemandByCondition", this.SelectDemandDTO).then(res => {
          this.SelectDemandVo = res.data.data.data
          this.total = res.data.data.total
        },
      )
    },
    demandToPurchase: function (scope) {
      this.$axios.post("/purchase/buyDemand/demandToPurchase/" + scope.row.id).then(res => {
        if (res.data.code === 200) {
          scope.row.state = 2
          this.$message.success("生成采购单成功");
        }
      })
    },
    getHotData(value1) {
      this.disHotData = true
      this.currentDate = value1
      console.log(this.currentDate)
      this.$axios.get("/purchase/buyDemand/getHotData/" + this.currentDate).then(res => {
        console.log(res.data.data)
        this.hotData = res.data.data

      })
    },
    generatedExcel() {
      this.$axios.post("/purchase/buyDemand/generateExcel", this.SelectDemandVo).then(res => {
        this.$message.success("导出成功")
      })
    },
    details: function (scope) {
      this.table = true
      this.$axios.get("/purchase/buyDemand/findDemandDetails/" + scope.row.id).then(res => {
          this.DemandDetailsList = res.data.data
        }
      )
    },
    auditBuyDemandFail(scope) {
      this.$axios.post("/purchase/buyDemand/updateDemandStateById/" + "-1/" + scope.row.id).then(res => {
        this.$message.success("审核完成")
        scope.row.state = -1
        this.dialogVisible = false;


      })
    },
    goAddNeed() {
      this.$router.push("/addNeed")
    },
    auditBuyDemandSuc(scope) {
      this.$axios.post("/purchase/buyDemand/updateDemandStateById/" + "1/" + scope.row.id).then(res => {
        scope.row.state = 1
        this.$message.success("审核完成")
        this.dialogVisible = false;
      })
    },
  }
}
</script>
